<template>
    <el-dialog :close-on-click-modal="false" title="事件详情" :visible.sync="dialogVisible" height="440px" width="800px" class="re-dialog">
        <div class="taaept-box">
            <el-form :model="ruleForm"  ref="ruleForm">
                <el-form-item label="事件名称：" :label-width="formLabelWidth" prop="eventName">
                    <el-input disabled placeholder="名称" v-model="record.eventName"></el-input>
                </el-form-item>
                <el-form-item label="事件地点：" :label-width="formLabelWidth" prop="eventAddress">
                    <el-input type="textarea" disabled placeholder="地点" v-model="record.eventAddress"></el-input>
                </el-form-item>
                <el-form-item :label="item.label" :label-width="formLabelWidth" :prop="item.code" v-for="(item,index) in listCofig" :key="index">
                    <el-input v-if="item.type === 'input'" disabled  v-model="record[item.code]"></el-input>
                    <el-tag v-else-if="item.type === 'tag'" class="tag" v-for="(it,ind) in item.data" :key="ind" size="mini"  :disable-transitions="true" :hit="true" :style="(ruleForm[item.code]==it.dictDataCode)?`background-color:${it.dictDataDesc};color:#fff`:`color:${it.dictDataDesc};border:1px solid ${it.dictDataDesc}`">{{it.dictDataName}}</el-tag>
                </el-form-item>
                <el-form-item label="限期办结时间：" :label-width="formLabelWidth">{{getTimeStr(record.dueTime) || ""}}</el-form-item>
                <el-form-item label="问题来源：" :label-width="formLabelWidth" prop="eventSourceName">
                    <el-input disabled placeholder="来源" v-model="record.eventSourceName"></el-input>
                </el-form-item>
            </el-form>
            <div class="time-line-parent">
                <Timeline :list="record.eventFlowData" :title="record.eventName" />
            </div>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import { getTimeStr } from "../../utils/index";
import Timeline from "../common/Timeline";
import { detailData } from "./cgDetailData";
export default {
    components: {
        Timeline
    },
    props: {
        // list: Array
    },
    data() {
        return {
            record: {},
            formLabelWidth: "120px",
            dialogVisible: false,
            getTimeStr,
            ruleForm: {
                eventName: "",
                classBigCode: "",
                classSmallCode: "",
                eventLevelCode: "1",//事件等级
                emergencyCode: "",//紧急程度
                eventAddress: "",
                receiverId: "",
                opinion: ""
            },
           listCofig: [
            
                {
                    label: "事件类型：",
                    value: "",
                    code: "eventType",
                    type: "input",
                    disabled: true,
                    data: []
                },
                {
                    label: "事件等级：",
                    value: "",
                    code: "eventLevelCode",
                    type: "tag",
                    disabled: true,
                    data: [
                        {dictDataCode:"1",dictDataName:"一般",dictDataDesc:"#2b88ff"},
                        {dictDataCode:"2",dictDataName:"较大",dictDataDesc:"#f6e694"},
                        {dictDataCode:"3",dictDataName:"重大",dictDataDesc:"#f8cc91"},
                        {dictDataCode:"4",dictDataName:"特重大",dictDataDesc:"#d85248"},
                    ]
                },
                {
                    label: "紧急程度：",
                    value: "",
                    code: "emergencyCode",
                    type: "tag",
                    disabled: true,
                    data: [
                        {dictDataCode:"1",dictDataName:"非紧急",dictDataDesc:"#2b88ff"},
                        {dictDataCode:"2",dictDataName:"紧急",dictDataDesc:"#ffa51d"},
                    ]
                }
            ],
            sourceCodeList: [],
            btnType: ""
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe("showCgDetail", (type, values) => {
            console.log(values);
            // this.btnType = values.btnType;
            this.ruleForm = {
                eventName: detailData.eventName,
                eventAddress: detailData.eventAddress,
                eventDetail: detailData.eventDetail,
                opinion: detailData.opinion,
                eventLevelCode: detailData.eventLevelCode,
                emergencyCode: detailData.emergencyCode,
            }; //重置
            this.dialogVisible = true;
            this.record = detailData || {};
        });
        // this.getDictCode();
        console.log(this.ruleForm,"fff")
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        /**
         * 获取数据字典--取件类型
         */
        // getDictCode() {
        //   //事件来源数据字典
        //   findByDictCode({ dictCode: "sortingEventSourceCode" }).then((res = {}) => {
        //     this.sourceCodeList=res.data || [];
        //   });
        // },
        // initsourceCode(code){
        //   return ((this.sourceCodeList.find(item=>item.dictDataCode==code))||{}).dictDataName||'-'
        // },
    }
};
</script>

<style lang = "scss" scoped>
.taaept-box {
    display: flex;
    flex-direction: row;
    > * {
        flex: 1;
        padding-left: 20px;
    }
}
.dialog-footer {
    margin-top: 0;
}
.time-line-parent {
    max-height: 70vh;
    overflow-y: auto;
}
.tag {
    color: #333;
    cursor: pointer;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid transparent;
    &:active {
        opacity: 0.8;
    }
}
</style>